@charset "utf-8";
/* CSS Document */

/*autor: Edgar medina Vargas
  instituto: cibertec
  año: 2011
  correo: medient@hotmail.com
  */
  
body{
	/*font-family:Calibri, Arial, sans-serif;font-size:12px;*/
	font-family:Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
	font-size:12px;
	background:#f4f4f4 url(../images/bg.gif) repeat top left;
	color:#333;
	/*overflow-y:scroll;*/
	height: 100%;
}
html{height: 100%;}

/*ESTILOS A LAS CABECERAS #####################################################################################################*/
h1{font-size:35px;font-weight:bold; font-family:hand !important;}
h2{font-size:25px;font-weight:bold; font-family:hand !important;}
h3{font-size:18px;}
h4{font-size:14px;}



#envoltura,#contenedor,#contenido{
	display:block;
}

#envoltura{
	display: table;
    height: 100%;
    width: 100%;
    margin: 0;
}
#contenedor{
	background:#f4f4f4 url(../images/bg.gif) repeat top left;
	display: table-cell;
    vertical-align:middle;
    position: relative;
    height: 100%;
	
	
}

#contenido{
	position:relative;
	background-color:#FFF;
		
	width:1150px;
	min-width:1150px;
	max-width:1150px;
	height:700px;
	min-height:700px;
	max-height:700px;
	
	margin:auto;
	
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	-moz-box-shadow:1px 1px 6px #888;
	-webkit-box-shadow:2px 1px 6px #888;
	box-shadow:1px 1px 6px #888;	
}

header.principal,section.principal,aside.principal,nav.principal,footer.principal{
}

/*div.a,div.b,div.c{
	position:relative;
	height:100%;
	width:100%;
	
	display:inline-block;
	margin:-1px;
}
.a{
	border-top:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #222;
	border-bottom:1px solid #222;
}
.b{
	border-top:1px solid #FFF;
	border-left:1px solid #FFF;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}

.c{
	border-top:1px solid #4988BF;
	border-left:1px solid #4988BF;
	border-right:1px solid #00274A;
	border-bottom:1px solid #00274A;
}*/


/* SOMBRAS Y LUCES */
/* .a,.b.c{ */
/* 	margin-top:-1px; */
/* 	margin-bottom: -1px; */
/* } */

header.principal .a,footer.principal .a{

	border-top:solid 1px #666;	
}
header.principal,footer.principal{

	border-bottom:solid 1px #112;	
}

aside.principal .c{
	border-top:solid 1px #3E78AE;
	
}
aside.principal{
/* 	margin-left:-1px; */
	
/* 	border-left:solid 1px #3E78AE;	 */
	border-bottom:solid 1px #063D71;	
}

section.principal .b{
	border-top:solid 1px #FFF;	
	
}
section.principal{
	border-bottom:solid 1px #444;	
}
nav.principal .a{
	border-top:solid 1px #666;		
}
nav.principal{
	border-bottom:solid 1px #112;		
}



nav.principal ul li{
	margin-top: -1px;
	margin-bottom: -1px;
}
nav.principal ul li{
}
nav.principal ul li{
	
	border-left:solid 1px #666;
}
nav.principal ul li a{
	
	border-right:solid 1px #112;
}












section.principal .b{
	padding:30px;
}
header.principal,nav.principal,footer.principal{
	color:#EEE;
	background:#444 url(../images/bg_dark2.png) repeat top left;
	
/* 	border-top:solid 1px #666; */
	
	/*border-bottom:solid 1px #111;
	border-right:solid 1px #111;
	border-top:solid 1px #666;
	border-left:solid 1px #666;*/
}
/*ESTILOS A LA CABECERA #####################################################################################################*/
header.principal,header.principal div.a{
	-moz-border-radius: 20px 20px 0px 0px;
	-webkit-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
	}
header.principal{
	position:relative;
	height:10%;
	min-height:10%;
	max-height:10%;
	width:100%;
	min-width:100%;
	max-width:100%;
}
header.principal img{
	height:50px;
	margin:18px 20px auto 45px;
	float:left;
}
header.principal p{
	margin:45px 45px auto 20px;
	float:right;
}
header.principal a{
	color:#F00;	
	text-decoration:none;
}
header.principal a:hover{
	color:#FFA800;	
}
header.principal span.perfil{
	color:#FFA800;	
}

/*cambiando estilos al hand*/
header.principal p, footer.principal p, nav.principal{
	font-family:hand;
	letter-spacing: 1px;
	font-size:1.1em;
	text-shadow:1px 2px 2px #222;
}

/*ESTILOS AL MENU #####################################################################################################*/
nav.principal{
	position:relative;
	height:3%;
	min-height:3%;
	max-height:3%;
	width:100%;
	min-width:100%;
	max-width:100%;
}

nav.principal ul {
	margin: 0 auto;
	width: 100%;
	list-style: none;
}
nav.principal ul li {
	float: left;
}
nav.principal ul li a {
	font-size:11px;
	position:relative;
	padding:0px 10px;
	display: block;
	min-width: 100px;
	line-height:21px;
	text-align: center;
	text-decoration: none;
	/*border-right:solid 1px #111;
	border-left:solid 1px #666;*/
	color:#FFF;
}
nav.principal ul li a:hover {
	background-color:#FFA800;
	text-shadow:1px 1px 1px #888;;
	/*border-right:solid 1px #FF7D00;
	border-left:solid 1px #FFD37A;*/
}

nav ul li.selected a {
	
}


/*ESTILOS A LA SECCION PRINCIPAL #####################################################################################################*/
section.principal{
	
	position:relative;
	height:82%;
	min-height:82%;
	max-height:82%;
	
	width:80%;
	min-width:80%;
	max-width:80%;
	background:#FFF url(../images/bg_cen.png) repeat top left;
	/*text-shadow:1px 1px 1px #CCC !important;*/
	float:left;
}
section.principal h1, h2{
	/*color:rgba(34, 34, 34, 0.5) !important;*/
	text-shadow:1px 1px 1px #AAA !important;
	
}
section.principal article{
	overflow-x:hidden; overflow-y:auto;
	height:440px;
	max-height:440px !important;
}

/*estilos a los div de modulos*/
section.principal .modulos {
	margin: 0 auto;
	width: 100%;
	list-style: none;
	margin-top: 20px;
}
section.principal .modulos li {
	float: left;
}
section.principal .modulos li a {
	font-family:hand;
	text-shadow:1px 1px 2px #CCC; 
	color:#666;
	text-decoration:none !important;
	display: block;
	width: 125px;
	height:125px;
	font-size: 14px;
	line-height:14px;
	text-align: center;
	border:solid 1px #CCC;
	margin:20px;
	background-color:#FFF;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow:1px 2px 7px #bbb;
	-webkit-box-shadow:1px 2px 7px #bbb;
	box-shadow:1px 2px 7px #bbb;
	background-position: center center;		
}
section.principal .modulos li a:hover {
			color: #FFF;
			background-color:#FFA800;
			border:solid 1px #F60;
}
section.principal .modulos li.selected a {
			color: #fff;
}
section.principal h2 {
			margin-bottom:30px;
}

/*para la navegabilidad*/
section.principal .menuDireccion{
	position:absolute;
	display:block;
	bottom:10px;
	left:25px;
	z-index:9;
}
.menuDireccion{width:300px; max-width:300px;}
.menuDireccion ul{width:300px; max-width:300px;}
.menuDireccion ul#icons {margin: 0; padding: 0;}
.menuDireccion ul#icons li {margin: 2px 5px; position: relative; padding: 4px 5px; cursor: pointer; float: left;  list-style: none;}
.menuDireccion #icons span.ui-icon {float: left; margin: 0 4px;}





/*ESTILOS PARA EL ASIDE #####################################################################################################*/
aside.principal{
	position:relative;
	height:82%;
	min-height:82%;
	max-height:82%;
	width:20%;
	min-width:20%;
	max-width:20%;
/* 	width:228px; */
/* 	min-width:228px; */
/* 	max-width:228px; */
	
	float:right;
	background:#2d65a7 url(../images/bg_blue.png) repeat top left;
	color:#FFF;
}

/*ESTILOS PARA EL PIE #####################################################################################################*/
footer.principal,footer.principal div.a{
	-moz-border-radius: 0px 0px 20px 20px;
	-webkit-border-radius: 0px 0px 20px 20px;
	border-radius: 0px 0px 20px 20px;
}
footer.principal{
	position:relative;
	height:5%;
	min-height:5%;
	max-height:5%;
	width:100%;
	min-width:100%;
	max-width:100%;
}
footer.principal p{
	padding-top:12px;
	display:block;
	font-size:11px;
	text-align:center;
}






/*UTILES #####################################################################################################*/
 @font-face { 
   font-family: hand;
   src: url(font/TGEB.ttf) format('truetype');
 }
 
.pegatina{
			position:absolute;
			height:163px;
			width:175px;
			min-height:163px;
			min-width:174px;
			background-image:url(../images/pegatina.png);
			background-repeat: no-repeat;
			z-index:999;
			margin:200px;
		}
.limpiador{
	clear:both;
}

.visible{
	display:block;
}
.invisible{
	display:none;
}

.cursado,.pendiente{
	font-weight:bold;
	
}
.cursado{
	color:rgba(34, 34, 34, 0.8) !important;
}
.pendiente{
	color:rgba(136, 7, 7, 0.8) !important;
}

.asterisco{
	color:#F00 !important;
	font-weight:bold !important;
}
/*ESTILOS A LOS FORMULARIOS*/
.formularioConFoto,.formularioBusquedaUna,.formularioTresColumnas{
	font-size:0.8em;
}
.formularioConFoto fieldset,.formularioBusquedaUna fieldset,.formularioTresColumnas fieldset{
	background:none;
	padding:20px 10px 10px 10px;
	margin-bottom:15px;
}
.formularioConFoto fieldset legend ,.formularioBusquedaUna fieldset legend,.formularioTresColumnas fieldset legend{
	margin-left:10px;
	padding:5px;
}

.formularioConFoto label,.formularioBusquedaUna label,.formularioTresColumnas label{
	display:block;
	margin-bottom:3px;
	font-weight:600;
}
.formularioConFoto input[type="text"],.formularioConFoto select ,.formularioBusquedaUna input[type="text"], .formularioBusquedaUna select,.formularioTresColumnas input[type="text"], .formularioTresColumnas select, .file{
	width:100%;
	border:1px solid rgba(34, 34, 34, 0.5);
	margin:-1px;
	margin-bottom:10px;
	padding:2px;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.file{
	background-color:#FFF;
	height:15px;
	line-height:15px;
}

.formularioConFoto input[type="submit"],.formularioConFoto input[type="button"].button,.formularioTresColumnas input[type="submit"]{
	/*position:absolute;*/
	float:right;
	margin: 0px 10px 5px 10px;
	width: 150px;
}

section.principal .button{
	float:right;
	margin: 0px 10px 5px 10px;
}

.formularioConFoto input[readonly],formularioTresColumnas input[readonly]{
	background-color:transparent;
	border:1px solid rgba(34, 34, 34, 0.1);
}
.formularioConFoto ul, formularioTresColumnas ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.formularioConFoto ul li{
	display:block;
  	width:39%;
	margin:0% 1%;
	float: left;
}
.formularioConFoto ul li.foto{
	display:block;
  	width:15%;
	margin:0% 1%;
	float: right;
}
.formularioConFoto ul li.foto img{
	border:3px solid rgba(34, 34, 34, 0.5);
}


/*Formulario a 3 columnas*/

.formularioTresColumnas ul li{
	display:block;
  	width:31%;
	margin:0% 1%;
	float: left;
}

/*ESTILO A LAS VENTANAS DE REQUISITOS*/
ol.listaRequisitos { font-style:italic;  font-size:24px; width:600px;  margin:20px auto; }
ol.listaRequisitos  li { }
ol.listaRequisitos  li p { padding:10px; font-style:normal; font-family:Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;font-size:12px; border-left: 1px solid #999; }
ol.listaRequisitos  li p em { display:block;color:#ffa800;font-size:14px;font-weight:bold; }


/*MENSAJES DE ALERTA Y ERROR*/
div .mensajeAlerta{
	margin:0px 0px 10px 0px;
	padding: 10px;
	overflow:hidden;
	background-image:url(custom-theme/images/ui-bg_diagonals-thick_40_ffa800_40x40.png)repeat !important;
	filter:alpha(opacity=90);
   -moz-opacity:0.9;
   opacity: 0.9;
}
div .mensajeAlerta p{margin:5px 27px;;
}
div .mensajeAlerta .titulo{margin:0px 5px;
}
div .mensajeAlerta .gracias{float:right; font-weight:bold;
}

/*ESTILOS PARA EL LISTADO DE DATOS*/
#seccionBusqueda{
	display:block;
	float:left;
	width:20%;
}
#seccionResultado{
	display:block;
	float:right;
	width:78%;
}
.formularioBusquedaUna .noBlock{
	width:30px;
	float:left;
}
.formularioBusquedaUna input[type="submit"]{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

/*PAR ALA TABLA QUE MUESTRA EL LISTADO*/
#tablaResultado{
	margin-top:10px;
	font-size:0.9em;
	width:100%;
}
#tablaResultado td{
	padding:2px 3px;
	margin:3px 4px;
	text-align:center;
}
#tablaResultado th{
	height:20px;
	vertical-align:middle;
	text-align:center;
	font-weight:bold;
}
#tablaResultado tbody tr:hover{
	cursor:pointer;
}
#tablaResultado th.left{
	-moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -khtml-border-top-left-radius: 6px; border-top-left-radius: 6px;
}
#tablaResultado th.right{
	-moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; -khtml-border-top-right-radius: 6px; border-top-right-radius: 6px;
}

/*PARA LAS TABLAS QUE MUESTRAN LOS CURSOS HABILES*/
.tablaCursos{
	display: table;
	
	font-size:10px;
	margin:1px;
	position:relative;
	width:100%;
	right:10px;
	border-top:1px solid #666;
	border-left:1px solid #666;
	
}
.tablaCursos thead tr td{
	display: table-cell;
     vertical-align: middle;
     position: relative;
	 
	font-size:11px;
	font-weight:bold;
	background:#888;
	color:#EEE;
	border-bottom:1px solid #666;
	border-right:1px solid #666;
	text-align:center;
	
}
.tablaCursos tbody tr td{
  border-bottom:1px solid #666;
  border-right:1px solid #666;
  padding-left:10px;

}
.tablaCursos tbody tr:nth-child(2n+1) {
  background-color: #FEFEFE;
}








/*ELIMINAR ESTOS ESTILOS*/
#tabs { height: 570px; margin-bottom:10px; } 
.tabs-bottom { position: relative; } 
.tabs-bottom .ui-tabs-panel { height:530px;max-height:530px; overflow: auto; } 
.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } 
.tabs-bottom .ui-tabs-nav li { margin-top: -4px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
.ui-tabs-selected { margin-top: -3px !important; }


fieldset .fieldsetImagen{
	overflow:auto;
	max-width: 455px
	
}
.fieldsetImagen .contenedorImagen{
	margin:10px;
	max-width: 455px
	
}

.fieldsetImagen legend{
	padding:5px;
	margin-left:15px;
}
